import React, { Component } from 'react'
import './App.css';
// import Counter from './Counter'
import { connect } from 'react-redux';
import { addTodoAction,YesTodoAction } from './redux/actions'

export class App extends Component {
  render() {
    return (
      <div className="App">
        {/* <Counter></Counter> */}
        <input type="text" ref="input" />
        <button onClick={() => {
          var val = this.refs.input.value
          this.props.addTodo(val)
        }}>点击添加Todo</button>
        <div>
          <p>正在进行</p>
          <div>
          {
            this.props.nolistTodo.map((item,index) =>{
              return <div key={index}>
                <input type="checkbox" onClick={() => {
                  this.props.YesTodo(item)
                }}></input>
            <span>{item.text}</span>
              </div>
            })
          }
        </div>
        </div>
        <div>
          <p>已完成</p>
          <div>
            {
              this.props.yeslistTodo.map((item,index) => {
                return <div key={index}>
                  <input type="checkbox" checked onClick={() => [
                    
                  ]}></input>
              <span>{item.text}</span>
                </div>
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

//获取redux中的状态
function mapStateToProps(rootReducer) {
  return {
    nolistTodo: rootReducer.todoReducer.nolist,
    yeslistTodo: rootReducer.todoReducer.yeslist
  }
}

//向redux 提交action
function mapActionToProps(dispatch) {
  return {
    addTodo: (val) => { dispatch(addTodoAction(val)) },
    YesTodo:(goYes) => { dispatch(YesTodoAction(goYes)) }
  }
}



export default connect(mapStateToProps, mapActionToProps)(App);

